<!--
 * @Description: CPA机考做题页  --Cpa_examtest_jk
 * @Author: your name
 * @Date: 2024-01-22
 * @LastEditTime: 2024-01-22
 * @LastEditors: Please set LastEditors
-->

<template>
  <div style="height: 100%">
    <div class="my_page">
      <!-- 1. 头部_顶部 -->
      <div class="topfix">
        <span class="name">注册会计师资格全国统一考试</span>
        <div class="head_r">
          <ul>
            <li>
              <el-button
                effect="dark"
                content="Bottom Center 提示文字"
                placement="bottom"
              >
                剩余：00:00:00
              </el-button>
            </li>
            <li>
              <span>座位号 </span>
              <span class="seat-num">1</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- 2.content-内容 /考试生关注事项-->
      <div class="tableMask exam-intro" v-if="matters_t">
        <div class="anList">
          <h3 class="antitle">特别提示</h3>
          <div class="anbody">
            <div class="remind-section">
              <h3>在开始答题前，请考生关注下列事项：</h3>
              <div>
                <p>
                  一、本试题卷案例分析题中有一道小题可以选用中文或英文解答，请仔细阅读答题要求。如使用英文解答，须全部使用英文，答题正确的，增加5分。试卷最高得分为105分。本科目合格分数线为60分。
                </p>
                <p>
                  二、考生在草稿纸上答题一律无效。考试结束后，不得将草稿纸带出考场。
                </p>
              </div>
            </div>
          </div>
          <el-button type="primary" @click="mattersContinue(1)">继续</el-button>
        </div>
      </div>

      <!-- 3.目录 -->
      <div class="tableMask exam-container" v-if="catalog">
        <div class="anList">
          <div class="antitle">
            <h3>【202308】《公司战略与风险管理》模拟考试卷</h3>
            <strong>目录（考试分成以下三个部分）：</strong>
          </div>
          <div class="anbody">
            <div class="catalogue">
              <div>
                <h4>一、单项选择题</h4>
                <p>
                  本题型共26小题,每小题1分,共26分。每小题只有一个正确答案,请从每小题的备选答案中选出一个你认为正确的答案,用鼠标点击相应的选项。
                </p>
              </div>
              <div>
                <el-button type="warning" @click="goContinue"
                  >点击进入</el-button
                >
              </div>
            </div>
            <div class="catalogue">
              <div>
                <h4>二、多项选择题</h4>
                <p>
                  本题型共16小题,每小题1.5分,共24分。每小题均有多个正确答案,请从每小题的备选答案中选出你认为正确的所有答案,用鼠标点击相应的选项。每小题所有答案选择正确的得分,不答、错答、漏答均不得分。
                </p>
              </div>
              <div>
                <el-button type="warning" @click="goContinue"
                  >点击进入</el-button
                >
              </div>
            </div>
            <div class="catalogue">
              <div>
                <h4>三、主观题</h4>
                <p>
                  本题型共5小题50分。其中一道小题可以选用中文或英文解答,请仔细阅读答题要求。如使用英文解答,须全部使用英文,答题正确的,增加5分。本题型最高得分为55分。
                </p>
              </div>
              <div>
                <el-button type="warning" @click="goContinue"
                  >点击进入</el-button
                >
              </div>
            </div>
          </div>
          <div>
            <div class="tip">
              注意：本场考试时间为 <span style="color: red">120分钟 </span>。
            </div>
            <div class="anfooter">
              <el-button type="info" @click="mattersContinue(0)">
                返回
              </el-button>
              <el-button type="primary" @click="goContinue">继续</el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 4.做题结构 -->
      <div class="ques_content" v-if="page_topic">
        <!-- 左侧题目按钮 -->
        <div class="item_list">
          <div class="item_list_cont">
            <div class="wrap_list_top">
              <div class="wrap_user_info">
                <div class="user_photo">
                  <img
                    src="https://www.rongyuejiaoyu.com/static/index/images/head8.jpg"
                    alt=""
                  />
                </div>
                <div class="entry_info">
                  <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>3</li>
                    <li>试卷名称:【202308】《公司战略与风险管理》模拟考试卷</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="wrap_item_num_list">
              <div class="ques-sheet">
                <p>
                  <i class="el-icon-document"></i>
                  【202308】《公司战略与风险管理》模拟考试卷
                </p>
                <ul>
                  <!-- 1.单项选择题 -->
                  <li class="firstLi">
                    <div class="wrap-group-name">
                      <span>
                        <i class="el-icon-arrow-down"></i>
                      </span>
                      <span> 单项选择题 </span>
                    </div>
                    <ul class="list">
                      <!-- 
                        1. actived 选中
                        2. link_active 做题装填(已做题)
                        3. link-marked 标记
                      -->
                      <li v-for="(item, index) in 7" :key="index">
                        <span :class="{ num_val: true, actived: index == 1 }">
                          {{ index + 1 }}
                        </span>
                      </li>
                    </ul>
                  </li>
                  <!-- 2.多项选择题 -->
                  <li class="firstLi">
                    <div class="wrap-group-name">
                      <span>
                        <i class="el-icon-arrow-down"></i>
                      </span>
                      <span> 多项选择题 </span>
                    </div>
                    <ul class="list">
                      <li v-for="(item, index) in 14" :key="index">
                        <span :class="{ num_val: true, actived: index == 2 }">
                          {{ index + 1 }}</span
                        >
                      </li>
                    </ul>
                  </li>

                  <!-- 4.综合题 -->
                  <li class="firstLi">
                    <div class="wrap-group-name">
                      <span>
                        <i class="el-icon-arrow-down"></i>
                      </span>
                      <span> 综合题 </span>
                    </div>
                    <ul class="list">
                      <li v-for="(item, index) in 6" :key="index">
                        <span :class="{ num_val: true, actived: index == 2 }">
                          {{ index + 1 }}
                        </span>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
            <div class="item_note">
              <div class="item-note-list">
                <ul>
                  <li>
                    <p>当前</p>
                  </li>
                  <li>
                    <p>未做</p>
                  </li>
                  <li>
                    <p>已答</p>
                  </li>
                  <li>
                    <div class="marked">
                      <span></span>
                    </div>
                    <p>标记</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧题目 -单选 -->
        <div class="item-con" v-if="!page_topic">
          <div class="wrap_group_name">
            <h3>单项选择题</h3>
          </div>
          <div class="wrap_ques">
            <div class="single_choice">
              <!-- <button class="add_bg">
                <img src="" alt="">
              </button>
              <button class="bbtn">
                <img src="" alt />
              </button> -->
              <div id="ques_text" class="content_stem">
                <span class="ques_num">1page</span>
                <span>下列有关审计风险的说法中，错误的是。</span>
                <span>(1.00分)</span>
              </div>

              <div class="content_list">
                <div
                  class="content_option"
                  v-for="(item, index) in 4"
                  :key="index"
                >
                  <span class="inputspan"></span>
                  <span>
                    {{ letterarr[index] }}.
                    注册会计师可以通过调整重要性降低检查风险
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 多选 -->
        <div class="item-con" v-if="!page_topic">
          <div class="wrap_group_name">
            <h3>多项选择题</h3>
          </div>
          <div class="wrap_ques">
            <div class="single_choice">
              <!-- <button class="add_bg">
                <img src="" alt="">
              </button>
              <button class="bbtn">
                <img src="" alt />
              </button> -->
              <div id="ques_text" class="content_stem">
                <span class="ques_num">1</span>
                <span>下列有关审计风险的说法中，错误的是。</span>
                <span>(1.00分)</span>
              </div>

              <div class="content_list">
                <div
                  class="content_option"
                  v-for="(item, index) in 4"
                  :key="index"
                >
                  <span class="inputspan"></span>
                  <span>
                    {{ letterarr[index] }}.
                    注册会计师可以通过调整重要性降低检查风险
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 综合题 -->
        <div class="item-con" v-if="page_topic">
          <div class="wrap_group_name">
            <h3>综合题</h3>
          </div>

          <div class="box">
            <div class="ziliao" :style="{ width: distance + '%' }">
              <div class="item-title pr">
                <div class="item_head_title">
                  <span>资料区</span>
                  <div class="pull-right">
                    <el-button size="mini" @click="dataArea">
                      <i class="el-icon-edit"></i>
                      {{ distance <= 50 ? '放大' : '恢复' }}
                    </el-button>
                  </div>
                </div>
              </div>
              <div class="item-ques">
                <div class="content-stem">
                  <span>1</span>
                </div>
                <div>
                  <p>
                    在对甲公司2020年年度财务报表进行审计时， A
                    注册会计师负责审计货币资金项目，以下是相关情况摘要。
                  </p>
                </div>
              </div>
            </div>
            <div class="bar" :style="`left: calc(${distance}% - -5px)`"></div>
            <div class="daan" :style="{ left: distance + '%' }">
              <div class="item-title pr">
                <div class="item_head_title">
                  <span>作答区</span>
                  <div class="pull-right">
                    <el-button size="mini" @click="replyDistrict">
                      <i class="el-icon-back"></i>
                      {{ distance == 50 || distance == 80 ? '放大' : '恢复' }}
                    </el-button>
                  </div>
                </div>
              </div>
              <div class="sa-input">
                <div class="clearfix">
                  <div class="tab">
                    <span class="actived">要求1</span>
                    <span>要求2</span>
                    <span>要求3</span>
                  </div>
                  <div class="quesContent">
                    <div style="height: 100%">
                      <p class="sa-title">
                        <span>
                          针对上述第（1）至（5）项，逐项指出审计项目组的做法是否恰当。如不恰当，简要说明理由。
                        </span>
                      </p>
                      <div class="editor_box">
                        <quill-editor
                          v-model="content"
                          :options="editorOptions"
                          class="editor"
                          placeholder="请输入..."
                          @change="editor_change()"
                        >
                        </quill-editor>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- footer-底部 -->
      <div class="ques_footer clearfix" v-if="page_topic">
        <div class="l-btn">
          <el-button type="primary">提交</el-button>
          <el-button type="text">
            <i class="el-icon-edit"></i>
            标记本题
          </el-button>
        </div>
        <div class="r-btn">
          <el-button plain>计算机</el-button>
          <el-button plain>系数表</el-button>
          <el-button type="primary">上一页</el-button>
          <el-button type="primary">下一页</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Cpa_examtest_jk',
  data() {
    return {
      matters_t: true,
      catalog: false,
      page_topic: false,
      distance: 50,
      content: '',
      letterarr: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
      editorOptions: {
        placeholder: '请输入...',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote'],
            ['code-block', 'image', 'link', 'formula'],
            [{ size: ['small', false, 'large', 'huge'] }]
          ]
        }
      }
    }
  },
  mounted() {
    let divElement = document.querySelector('body > div')
    divElement.style.height = '100%'
  },
  created() {},
  methods: {
    goContinue() {
      this.matters_t = false
      this.catalog = false
      this.page_topic = true
    },
    editor_change() {
      console.log(this.content)
    },

    mattersContinue(type_t) {
      if (type_t === 1) {
        this.matters_t = false
        this.catalog = true
      } else {
        this.matters_t = true
        this.catalog = false
      }
    },
    dataArea() {
      if (this.distance <= 50) {
        this.distance = 80
      } else {
        this.distance = 50
      }
    },
    replyDistrict() {
      if (this.distance == 50 || this.distance == 80) {
        this.distance = 20
      } else {
        this.distance = 50
      }
    }
  }
}
</script>

<style scoped lang="scss">
@mixin note-list-li {
  content: ' ';
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid #999;
  margin: 0 auto;
  display: inline-block;
  overflow: hidden;
}

.my_page {
  height: 100%;

  /* 头部内容样式 */
  .topfix {
    height: 45px;
    background-color: #447dff;
    color: #fff;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .name {
      padding-left: 12px;
    }

    .head_r {
      padding-right: 12px;

      ul {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .el-button {
          margin: 0;
          padding: 0;
          width: 126px;
          height: 26px;
          line-height: 26px;
          border: 1px solid #fff;
          background-color: #fff;
          border-radius: 50px;
          text-align: center;
          color: #447dff;
        }

        li:first-child {
          margin: 0 15px;
        }

        .seat-num {
          display: inline-block;
          width: 28px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          font-size: 18px;
          vertical-align: middle;
          color: #007bff;
          background: #fff;
          border-radius: 4px;
          margin-right: 8px;
        }
      }

      li {
        vertical-align: middle;
        list-style: none;
      }
    }
  }

  // 综合题
  .box {
    font-size: 16px;
    line-height: 24px;
    height: calc(100% - 80px);
    position: relative;
    overflow: hidden;
    margin-left: 20px;
    .item-title {
      height: 60px;
      position: relative;
    }
    .item_head_title {
      width: 100%;
      padding: 16px;
      .pull-right {
        float: right;
        margin-right: 35px;
      }
    }
  }
  .daan {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;

    .sa-input {
      padding: 10px 16px;
      position: absolute;
      right: 0;
      left: 0;
      height: calc(100% - 70px);
      top: 60px;
      overflow: auto;
      bottom: 50px;

      .clearfix {
        height: 100%;

        .quesContent {
          height: calc(100% - 35px);
          overflow-y: scroll;
          .sa-title {
            font-size: 16px;
            line-height: 20px;
            margin: 16px 0 5px 0;
            height: 82px;
            overflow-y: scroll;
          }

          .editor_box {
            position: relative;
            width: 100%;
            // height: 300px;
            // min-height: 480px;
            height: calc(100% - 90px);
            min-height: 300px;
            .editor {
              height: 90%;
            }
          }
        }

        .tab {
          border-bottom: 1px solid #dee2e6 !important;
          span {
            user-select: none;
            padding: 4px 8px;
            margin: 5px 0 -1px -1px;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-top: 1px solid #ddd;
            font-size: 16px;
            cursor: pointer;
            &.actived {
              background-color: #447dff;
              color: #fff;
            }
          }
        }
      }
    }
  }
  .bar {
    position: absolute;
    height: 100%;
    width: 3px;
    background-color: #ddd;
    z-index: 2;
    user-select: none;
  }
  .ziliao {
    position: absolute;
    top: 0;
    height: 100%;

    .item-ques {
      padding-right: 10px;
      height: calc(100% - 60px);
      overflow: auto;

      // 滚动条样式
      &::-webkit-scrollbar {
        width: 10px;
      }
      // 滚动槽
      &::-webkit-scrollbar-track {
        border-radius: 10px;
        background: #f2f2f2;
        // box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      }
      // 滚动滑块
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #b4bbc5;
        // box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      }

      .content-stem {
        line-height: 1.6;
        color: #000;
        width: 100%;
        margin-bottom: 10px;
        font-weight: 700;

        span {
          display: inline-block;
          padding: 0 5px;
          background-color: #447dff;
          color: #fff;
          font-style: normal;
          border-radius: 3px;
          min-width: 25px;
          text-align: center;
          margin-right: 10px;
        }
      }
    }
  }
}

/* 内容区域 */

.tableMask {
  width: 100%;
  height: 100%;
}
.exam-intro {
  .anList {
    width: 80%;
    height: 70%;
    margin: 0 auto;
    padding: 0 0 82px;
    box-shadow: 0 0 10px 10px #dae0f0;
    margin-top: 70px !important;

    .antitle {
      text-align: center;
      margin-bottom: 0;
      font-size: 20px;
      font-weight: 700;
      padding: 20px 0;
      border-bottom: 1px solid #ddd;
    }

    .el-button {
      text-decoration: none;
      display: block;
      width: 160px;
      padding: 6px 5px;
      margin: 30px auto 20px auto;
      border-radius: 3px;
      color: #fff;
      font-size: 16px;
      text-align: center;
      border: 1px solid #477eff;
      box-shadow: 0 0 5px #9ab7fc;
      background: #477eff;
      transition: all 0.3s;
      cursor: pointer;
    }
  }
  .anbody {
    max-height: none;
    height: 80%;
    overflow-y: hidden;
    width: 100%;

    .remind-section {
      flex: 1;
      margin: 0 auto;
      width: 92%;
    }
    .remind-section h3 {
      font-size: 1rem;
      font-weight: bold;
      margin: 2.4rem 0;
      line-height: 1.2;
    }
    .remind-section p {
      font-size: 0.875rem;
      line-height: 1.5rem;
      text-indent: -2rem;
      margin-left: 2rem;
      text-align: justify;
      margin-top: 0;
      margin-bottom: 1rem;
    }
    .remind-section p ~ p {
      margin-top: 1.5rem;
    }
  }
}

.exam-container {
  .anList {
    top: 0;
    width: 80%;
    height: 100%;
    padding: 0 16px 30px 16px;
    max-width: none;
    background: transparent;
    margin: auto;
    overflow: hidden;
    border-radius: 5px;
    text-align: left;

    h3 {
      line-height: 50px;
      padding: 10px 0 15px;
      text-align: center;
      margin-bottom: 0;
      font-size: 20px;
      font-weight: 700;
    }

    .antitle {
      margin-bottom: 10px;
      line-height: 34px;
      font-size: 17px;
    }

    .anbody {
      box-shadow: 0 0 8px 8px #dae0f0;
      max-height: 500px;
      background-color: #fff;
      overflow-y: auto;
      padding: 10px 10px;
    }

    .tip {
      margin-top: 20px;
      font-size: 17px;
      font-weight: 700;
      text-align: left;
    }

    .anfooter {
      display: flex;
      justify-content: center;
      margin-top: 30px;

      .el-button {
        text-decoration: none;
        width: 160px;
        padding: 6px 5px;
        border-radius: 3px;
        color: #fff;
        font-size: 16px;
        transition: all 0.3s;
        margin-right: 40px;
      }
      .el-button:last-child {
        border: 1px solid #477eff;
        box-shadow: 0 0 5px #9ab7fc;
        background: #477eff;
      }
    }
  }

  .anbody {
    .catalogue {
      border-bottom: 2px dotted #ddd;
      line-height: 24px;
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      div:last-child {
        width: 150px;
        .el-button {
          float: right;
          height: 30px;
          padding: 5px 20px;
          font-size: 14px;
          color: #fff;
          border-radius: 3px;
          background: #ff925a;
          box-shadow: none !important;
          border: 1px solid #ff925a;
          transition: all 0.3s;
        }
      }

      div:first-child {
        h4,
        p {
          font-weight: 400;
          font-size: 14px;
        }
      }
    }
  }
}

/* 做题页 */
.ques_content {
  display: flex;
  height: calc(100% - 100px);
  ul {
    list-style: none;
  }
}

.single_choice {
  padding: 8px 16px;
  .content_stem {
    height: 100%;
    line-height: 1.6;
    color: #000;
    width: 100%;
    margin-bottom: 10px;
    list-style: none;

    .ques_num {
      display: inline-block;
      padding: 0 5px;
      background-color: #447dff;
      color: #fff;
      font-style: normal;
      border-radius: 3px;
      min-width: 25px;
      text-align: center;
      margin-right: 10px;
    }
  }

  .content_list {
    margin-bottom: 20px;
    .content_option {
      cursor: pointer;
      margin-bottom: 4px;
      .inputspan {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #fff;
        border: 1px solid #666;
      }
    }
  }
}

.item-con {
  flex: 1;
  width: 100%;
  padding-left: 230px;

  .wrap_group_name {
    position: relative;
    border-bottom: 1px solid #ddd;
    padding-left: 16px;
    padding-right: 16px;
    h3 {
      font-size: 18px;
      line-height: 1.2;
      padding: 8px 0;
      display: table-cell;
      vertical-align: middle;
      height: 54px;
      overflow: hidden;
      font-weight: 700;
    }
  }
}

.item_list {
  width: 220px;
  position: absolute;
  top: 45px;
  bottom: 52px;
  padding-bottom: 51px;
  z-index: 999;
}

.item_list_cont {
  background-color: #fff;
  position: absolute;
  border-radius: 5px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.wrap_user_info {
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed #999;
  border-radius: 5px;
  background-color: #f8f9fa !important;
  .entry_info {
    li {
      font-size: 14px;
      color: #000;
    }
  }
  .user_photo {
    margin: 0 0 10px 30px;
    cursor: pointer;

    img {
      height: 100px;
      display: inline-block;
      vertical-align: middle;
    }
  }
}

.wrap_item_num_list {
  position: absolute;
  top: 275px;
  bottom: 51px;
  padding: 10px 15px;
  overflow: auto;
  overflow-y: overlay;
  background-color: #fff;
  transition: all 0.3s;
  .ques-sheet {
    p {
      padding: 5px 0;
      font-size: 14px;
      color: #007bff !important;
    }

    .firstLi {
      padding-bottom: 5px;
      margin-left: 0;
      padding-top: 0;
      list-style: none;
      .list {
        margin-top: 8px;
        margin-bottom: 16px;
        overflow: hidden;

        .num_val {
          border: 1px solid #999;
          width: 28px;
          height: 28px;
          font-size: 15px;
          border-radius: 4px;
          text-align: center;
          line-height: 28px;
          display: inline-block;
          overflow: hidden;
          position: relative;

          &.actived {
            background-color: #447dff;
            border-color: #447dff;
            color: #fff;
          }

          &.link_active {
            background-color: #55db9a;
            border-color: #55db9a;
            border: 0;
            color: #fff;
          }

          &.link-marked::after {
            content: ' ';
            border-width: 8px;
            border-color: transparent #bd0000 #bd0000 transparent;
            border-style: solid;
            position: absolute;
            bottom: 0;
            right: 0;
          }
        }

        li {
          float: left;
          width: 25%;
          margin-bottom: 8px;
          height: 28px;
          text-align: center;
          cursor: pointer;
          color: #000;
          padding-bottom: 5px;
          margin-left: 0;
          padding-top: 0;
          list-style: none;
        }
      }
    }
    .wrap-group-name {
      cursor: pointer;
      user-select: none;

      span:first-child {
        color: #969696;
        font-size: 16px;
      }

      span {
        font-size: 14px;
        font-family: 'Microsoft Yahei';
      }
    }
  }
}

.item_note {
  position: absolute;
  width: 100%;
  bottom: 0;

  ul {
    list-style: none;
  }
  .item-note-list {
    li:first-child::before {
      @include note-list-li();
      background-color: #447dff;
      border-color: #447dff;
    }

    li:nth-child(2)::before {
      @include note-list-li();
    }
    li:nth-child(3)::before {
      @include note-list-li();
      background-color: #55db9a;
      border-color: #55db9a;
    }

    li:last-child {
      .marked {
        span {
          width: 13px;
          height: 13px;
          border-radius: 4px;
          border: 1px solid #999;
          margin: 0 auto;
          position: relative;
          display: inline-block;
          overflow: hidden;

          &::after {
            content: ' ';
            // border-color: transparent transparent #ff5464;
            border-width: 8px;
            border-color: transparent #bd0000 #bd0000 transparent;
            border-style: solid;
            position: absolute;
            bottom: 0;
            right: 0;
          }
        }
      }
    }

    li {
      float: left;
      width: 25%;
      text-align: center;
      font-size: 13px;
      list-style: none;
    }
  }
}

/* <!-- footer-底部 --> */
.ques_footer {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #efefef;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .r-btn {
    padding-right: 15px;
    .el-button:first-child,
    .el-button:nth-child(2) {
      background-color: #fff;
      border-color: #409eff;
      color: #409eff;
      line-height: 8px;
    }
    .el-button:nth-child(3),
    .el-button:last-child {
      width: 190px;
      height: 34px;
      padding: 0;
    }
  }

  .l-btn {
    padding-left: 15px;
    .el-button:first-child {
      width: 190px;
      height: 34px;
      padding: 0;
    }
  }
}
</style>
